
/* 这个文件是实现博客列表页的样式的 */

.blog {
    width: 100%;
    padding: 20px;
}

.blog h2 {
    /* 水平居中 */
    text-align: center;
    padding: 10px;
    /* padding: 20px 10px 10px 20px; */
}

.blog .date {
    text-align: center;
    color: rgb(23, 94, 46);
    padding: 10px;
}

.blog .desc {
    /* 设置首行缩进两个元素的大小 */
    text-indent: 2em;
}

.blog a {
    /* 为了方便实现样式，把a标签变成块级元素 */
    display: block;
    width: 120px;
    height: 40px;

    /* 水平居中 */
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;

    /* 加上边框 2px 实线 黑色*/
    border: 1px solid black;

    /* 框内文字水平居中 */
    text-align: center;
    /* 垂直居中: 设置行高就行了 和元素高度一样 */
    line-height: 40px;

    /* 去掉下划线 */
    text-decoration: none;

    /* a标签内容就是 文字 ，设置文字颜色 */
    color: black;

    /* 给鼠标悬停交互增加过渡效果 transition:过渡 */
    transition: all 0.8s;

    /* 设置圆角 */
    border-radius: 7px;
}

/* 增加悬停交互：也就是背景颜色发生改变 */
.blog a:hover {
    /* 内容发生变化，a标签内容就是 文字 */
    color: white;
    /* 背景变灰 */
    background: #666;
}

